<template>
    <el-menu class="h-full" :default-active="tabsStore.currentPath" active-text-color="#f36214" router unique-opened
        @select="handleSelect">
        <MenuItem :menuList="permissionStore.menuList">
        </MenuItem>
    </el-menu>
</template>

<script setup>
import MenuItem from '@/components/home/menu/MenuItem.vue'
import { usePermissionStore } from '@/stores/permission'
import { useTabsStore } from '@/stores/tabs'

// 获取全局状态中的permission
const permissionStore = usePermissionStore()
// 获取全局状态中的tabs
const tabsStore = useTabsStore()

/**
 * 选中时保存当前的index(也就是路由path)
 * @param {*} key 被选中菜单的index属性,也就是路由的path
 * @param {*} keyPath 
 */
const handleSelect = (key, keyPath) => {
    // 修改全局的当前选中菜单
    tabsStore.currentPath = key
    // 增加或选中tab标签
    addOrSelectTab(key)
}

// 点击左侧菜单,新增/选中tab
const addOrSelectTab = path => {
    // 1.判断Tabs中是否已存在
    let tab = tabsStore.tabs.find(item => item.path === path)
    if (!tab) {
        // 2.如果不存在,去routerList中查找tab
        tab = permissionStore.routerList.find(item => item.path === path)
        // 3.添加到tabs
        tabsStore.tabs.push(tab)
    }
    // 4.选中tab
    tabsStore.selectTab = tab.name
}
</script>

<style scoped>

</style>